<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>LayIM测试</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css" media="all">
    <script src="./static/layui/layui.js" ></script>
    <script src="./static/js/path.js"></script>
    <script src="./static/layui/jquery.min.js"></script>
</head>

<body>
<script>
    var name = prompt("请输入你的名字。。。。")
    while (name==""){
        name = prompt("请输入你的名字。。。。")
    }
    if(name!=""){
        $.post(baseUrl+'user/registerUser', {
            name:name
        }, function(res){
            if(res.code == 0){
                name = res.data;
                localStorage.setItem("userid",res.data);
            }
        });
    }
    var sleep = function (time) {
        var startTime = new Date().getTime()+parseInt(time,10)
        while (new Date().getTime()<startTime){}
    }
    sleep(1000)

    var layim ,$
    layui.use(['layim','layer'], function(){
        layim = layui.layim
        $ = layui.jquery, layer = layui.layer;
        //基础配置
        layim.config({
            init: {
                url:baseUrl+"user/getUserInfo",
                type:"get",
                data:{"userId":name}
//                "mine": {
//                    "username": name //我的昵称
//                    ,"id": "100000" //我的ID
//                    ,"status": "online" //在线状态 online：在线、hide：隐身
//                    ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
//                    ,"avatar": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596006069375&di=0d03c2c63b798eef42a0c625e1ec027f&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01dfcbc38578dac4c2.jpg" //我的头像
//                }
//                ,"friend": [{
//                    "groupname": "松叼" //好友分组名
//                    ,"id": 1 //分组ID
//                    ,"list": [{ //分组下的好友列表
//                        "username": "贤心" //好友昵称
//                        ,"id": "100001" //好友ID
//                        ,"avatar": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596006069374&di=7671e0318c2f7c2fb0c0b1c6cf09f54c&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg" //好友头像
//                        ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名
//                        ,"status": "online" //若值为offline代表离线，online或者不填为在线
//                    },{ //分组下的好友列表
//                        "username": "麻神" //好友昵称
//                        ,"id": "100002" //好友ID
//                        ,"avatar": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596006069374&di=7671e0318c2f7c2fb0c0b1c6cf09f54c&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg" //好友头像
//                        ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名
//                        ,"status": "online" //若值为offline代表离线，online或者不填为在线
//                    }
//                    ]
//                }]
//                ,"group": [{
//                    "groupname": "前端群" //群组名
//                    ,"id": "101" //群组ID
//                    ,"avatar": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=165123634,1352425622&fm=26&gp=0.jpg" //群组头像
//                }]
            } //获取主面板列表信息，下文会做进一步介绍

            //获取群员接口（返回的数据格式见下文）
            ,members: {
                url: baseUrl+'user/getGroupsMembers' //接口地址（返回的数据格式见下文）
                ,type: 'get' //默认get，一般可不填
                ,data: {} //额外参数

            }

            //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
            ,uploadImage: {
                url: '' //接口地址
                ,type: 'post' //默认post
            }
            ,initSkin: '4.jpg'
            ,isVideo:true
            //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
            ,uploadFile: {
                url: '' //接口地址
                ,type: 'post' //默认post
            }
            //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
            ,tool: [{
                alias: 'code' //工具别名
                ,title: '代码' //工具名称
                ,icon: '&#xe64e;' //工具图标，参考图标文档
            }]

            ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
            ,find: layui.cache.dir + 'css/modules/layim/html/find1.html' //发现页面地址，若不开启，剔除该项即可
            ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
            ,brief:false
            ,skin:[
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595846921883&di=6deb9ca0e8fb62a7bb2f794a2c8f000f&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170918%2Fcf9957452a574200b3a8f3b3acf6e8dc.jpeg"
            ]

    });


//监听layim建立就绪
        layim.on('ready', function(res){
            //console.log(res.mine);

            $.get(baseUrl+'user/getUserLog', {
                userId:name
            }, function(res){
                if(res.code == 0){
                    if(res.data.length!=0){
                        layim.msgbox(res.data.length); //模拟消息盒子有新消息，实际使用时，一般是动态获得
                        localStorage.setItem("msgbox",res.data.length);
                        return
                    }
                    return localStorage.setItem("msgbox",0);
                }
            });
        });
        layim.on('online', function(status){
            console.log(status); //获得online或者hide
            alert("上下线修改")
            //此时，你就可以通过Ajax将这个状态值记录到数据库中了。
            //服务端接口需自写。
        });
        layim.on('sign', function(value){
            console.log(value); //获得新的签名
            alert("签名修改")
            //此时，你就可以通过Ajax将新的签名同步到数据库中了。
        });
        //建立WebSocket通讯
        //注意：如果你要兼容ie8+，建议你采用 socket.io 的版本。下面是以原生WS为例
        var socket = new WebSocket('ws://localhost:9000/websocket"');
        //发送一个消息

//        codelayui.code
        //更多情况下，一般是传递一个JSON
//        socket.send(JSON.stringify({
//            type: '' //随便定义，用于在服务端区分消息类型
//            ,data: {}
//        }));
        //连接成功时触发
        socket.onopen = function(){
            var obj = {
                "mine":{
                    "username":"",
                    "avatar":"",
                    "id":name,
                    "mine":true,
                    "content":""
                },
                "to":{
                    "id":"",
                    "groupname":"",
                    "avatar":"",
                    "name":"",
                    "type":"register",
                    "historyTime":0
                }
            }
            socket.send(JSON.stringify(obj));
        };
        //监听收到的消息
        socket.onmessage = function(res){

            //res为接受到的值，如 {"emit": "messageName", "data": {}}
            //emit即为发出的事件名，用于区分不同的消息
            var parse = JSON.parse(res.data);
            console.log(parse)
            console.log(parse.group)
            if (parse.system){
//                layim.getMessage({
//                    username: "小酱-(系统消息)"
//                    ,avatar: "//tva1.sinaimg.cn/crop.7.0.736.736.50/bd986d61jw8f5x8bqtp00j20ku0kgabx.jpg"
//                    ,id: parse.id
//                    ,type: "friend"
//                    ,content: parse.content
//                });
                if(parse.type=="addFriend"){
                    var num = localStorage.getItem("msgbox")
                    layim.msgbox(parseInt(num)+1);
                    return;
                }
                if(parse.type == "agree"){
                    parent.layui.layim.addList({
                        type: 'friend'
                        ,avatar: parse.user.avatar //好友头像
                        ,username: parse.user.username //好友昵称
                        ,groupid: parse.groupId //所在的分组id
                        ,id: parse.user.id//好友ID
                        ,sign: parse.user.sign //好友签名
                    });
                    return
                }
                layer.open({
                    title: '系统消息'
                    ,content: parse.content
                });
            }else {
                layim.getMessage({
                    username: parse.username //消息来源用户名
                    ,avatar: parse.avatar //消息来源用户头像
                    ,id: parse.id //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
                    ,type: parse.type //聊天窗口来源类型，从发送消息传递的to里面获取
                    ,content: parse.content //消息内容
                    ,cid: parse.cid //消息id，可不传。除非你要对消息进行一些操作（如撤回）
                    ,mine: false //是否我发送的消息，如果为true，则会显示在右方
                    ,fromid: parse.fromid //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
                    ,timestamp: parse.timestamp //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
                });
            }
        };
        layim.on('sendMessage', function(res){
            console.log(JSON.stringify(res))
            socket.send(JSON.stringify(res));
        })
    });
    document.oncontextmenu = function() {
        return false;
    }
    // 单击聊天主界面事件
    $('body').on('click', '.layui-layim', function(e){
        emptyTips();
    });
    // 右击聊天主界面事件
    $('body').on('mousedown', '.layui-layim', function(e){
        emptyTips();
    });
    /* 监听鼠标滚轮事件 */
    $('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){
        emptyTips();
    });
    /* 绑定好友右击事件 */
    $('body').on('mousedown', '.layim-list-friend li ul li', function(e){
        // 清空所有右击弹框
        emptyTips();
        if(3 != e.which) {
            return;
        }
        // 不再派发事件
        e.stopPropagation();

        var othis = $(this);
        var avatar =  othis.find("img").attr("src")
        var uid = othis.parent().context.className.trim().substring(12)
        var name = othis.find("span").html()
//        alert(othis.parent().attr("class"))
        if (othis.hasClass('layim-null')) return;

        // 移除所有选中的样式
        $('.layim-list-friend li ul li').removeAttr("style","");
        // 标注为选中
        othis.css({'background-color':'rgba(0,0,0,.05)'});

        var mineId = $(this).data('mineid');
        var space_icon = '&nbsp;&nbsp;';
        var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        var html = [
            '<ul data-name="'+name+'" id="contextmenu_'+uid + '" data-id="'+uid+'" data-index="'+mineId+'" data-mold="1" data-avatar="'+avatar+'">',
            '<li data-type="menuChat" data-name"'+name+'"><i class="layui-icon" >&#xe611;</i>'+space_icon+'发送即时消息</li>',
            '<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'查看资料</li>',
            '<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'消息记录</li>',
            '<li data-type="menuCreate"><i class="layui-icon">&#xe770;'+space_icon+'创建分组</li>',
            '<li data-type="menuCreateGroups"><i class="layui-icon">&#xe770;'+space_icon+'创建群组</li>',
            '<li data-type="menuDelete">'+space_text+'删除好友</li>',
            '<li data-type="menuMoveto">'+space_text+'移动至</li></ul>',
        ].join('');

        layer.tips(html, othis, {
            tips: 1
            ,time: 0
            ,shift: 5
            ,fix: true
            ,skin: 'ayui-box layui-layim-contextmenu'
            ,success: function(layero){
                var liCount = (html.split('</li>')).length;
                var stopmp = function (e) { stope(e); };
                layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
                var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
                // 移动弹框位置
                var top = layerobj.css('top').toLowerCase().replace('px','');
                var left = layerobj.css('left').toLowerCase().replace('px','');
                top = getTipTop(1, top, liCount);
                left = 30 + parseInt(left);
                layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
                $('.layui-layim-contextmenu li').css({'padding-left':'18px'});
            }
        });
    });

    // 清空所有右击弹框
    var emptyTips = function () {
        // 移除所有好友选中的样式
        $('.layim-list-friend li ul li').removeAttr("style", "");
        // 移除所有群组选中的样式
        $('.layim-list-group li').removeAttr("style","");
        // 关闭右键菜单
        layer.closeAll('tips');
    };

    // 获取窗口的文档显示区的高度
    var currentHeight = getViewSizeWithScrollbar();
    function getViewSizeWithScrollbar(){
        var clientHeight = 0;
        if(window.innerWidth){
            clientHeight = window.innerHeight;
        }else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
            clientHeight = document.documentElement.offsetHeight;
        }else{
            clientHeight = document.documentElement.clientHeight + getScrollWith();
        }
        clientHeight = clientHeight-180;
        return clientHeight;
    }

    /**
     *计算tip定位的高度
     * @param type 类型(1好友、群组，2分组)
     * @param top 原弹框高度
     * @param liCount 弹框层中li数量
     */
    var getTipTop = function (type, top, liCount) {
        liCount--;
        if(top > (currentHeight-45*liCount)){
            top = parseInt(top) - 45;
        }else{
            if(type == 1){
                top = parseInt(top) + 30*liCount - 10;
            }else{
                top = parseInt(top) + 30*(liCount - 1);
            }
        }
        return top;
    };

    // 绑定右击菜单中选项的点击事件
    var $ = layui.jquery, active = {
        menuChat: function(){
            /*发送即时消息*/
            var mineId = $(this).parent().data('id');
            var moldId = $(this).parent().data('mold');
            var avatar = $(this).parent().data('avatar');
            var name = $(this).parent().data('name');
            console.log(mineId);
            layim.chat({
                type: moldId == 1 ? "friend" : "group",
                name: name,
                avatar: avatar,
                id: mineId,
                status: '好友当前离线状态'
            });
        },
        menuHistory: function(){
            /*消息记录*/
            var mineId = $(this).parent().data('id');
            var moldId = $(this).parent().data('mold');
            console.log(mineId);
        },
        menuCreateGroups:function () {
            layer.prompt({
                formType: 0,
                title: '请输入群组名称',
            }, function(value, index, elem){
                $.post(baseUrl+'user/createGroups', {
//             uid: uid //对方用户ID
                    uid: localStorage.getItem("userid") //我设定的好友分组
                    ,groupname:value
                }, function(res){
                    if(res.code != 0){
                        return layer.msg(res.msg);
                    }
                    var groups = {
                        type: 'group' //列表类型，只支持friend和group两种
                        ,avatar: res.data.avatar //群组头像
                        ,groupname: res.data.groupname //群组名称
                        ,id: res.data.id //群组id
                    }
                    layim.addList(groups);
                });
                layer.close(index);
            });
        },
        menuCreate:function () {

            layer.prompt({
                formType: 0,
                title: '请输入分组名称',
            }, function(value, index, elem){
                $.post(baseUrl+'user/createGroup', {
//             uid: uid //对方用户ID
                    uid: localStorage.getItem("userid") //我设定的好友分组
                    ,groupname:value
                }, function(res){
                    if(res.code != 0){
                        return layer.msg(res.msg);
                    }
                    var group = {
                        id:res.data,
                        groupname:value
                    }
                    addFriendGroup(group);
                    // 更新缓存
                    var cacheFriend = layim.cache().friend;
                    cacheFriend.push(group);
                    layim.cache().friend = cacheFriend;
                    return layer.msg("分组创建成功！");
                });
                layer.close(index);
            });

//            var imGroup = {
//                "id": 1,
//                "groupname": "我的好友"
//            };
//// 往主面板添加分组
//            addFriendGroup(imGroup);
//// 更新缓存
//            var cacheFriend = layim.cache().friend;
//            cacheFriend.push(imGroup);
//            layim.cache().friend = cacheFriend;
//            console.log(parent.layui.layim.cache().friend)
//            layim.addList({
//                type: 'group' //列表类型，只支持friend和group两种
//                ,avatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596623586058&di=b5e60977d6a4c5235ba3b7faa364804f&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020162058_UrMNe.jpeg" //群组头像
//                ,groupname: 'Angular开发' //群组名称
//                ,id: "12333333" //群组id
//            });
        }

    };
    var addFriendGroup = function (friendGroup) {
        // 下面是自己手动把分组添加到列表中
        var friendList_ul = document.getElementsByClassName("layim-list-friend")[0];
        var li = document.createElement("li");
        friendList_ul.appendChild(li);
        var h5 = document.createElement("h5");
        li.appendChild(h5);
        h5.setAttribute("layim-event", "spread");
        h5.setAttribute("lay-type", "false");
        h5.setAttribute("groupid", friendGroup.id);
        var i = document.createElement("i");
        h5.appendChild(i);
        i.setAttribute("class", "layui-icon");
        i.innerText = "";
        var span = document.createElement("span");
        h5.appendChild(span);
        span.innerText = friendGroup.groupname;
        var em = document.createElement("em");
        h5.appendChild(em);
        var span1 = document.createElement("span");
        em.appendChild(span1);
        span1.innerText = '(';
        var cite = document.createElement("cite");
        em.appendChild(cite);
        cite.setAttribute("class", "layim-count");
        cite.innerText = ' 0';
        var span2 = document.createElement("span");
        em.appendChild(span2);
        span2.innerText = ')';
        var ul = document.createElement("ul");
        li.appendChild(ul);
        ul.setAttribute("class", "layui-layim-list");
        var li2 = document.createElement("li");
        ul.appendChild(li2);
        li2.setAttribute("class", "layim-null");
        li2.innerText = '该分组下暂无好友';
    };
    $('body').on('click', '.layui-layer-tips li', function(e){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
        // 清空所有右击弹框
        emptyTips();
    });


</script>
</body>
</html>